<template>
  <div>
    <h3>商品列表</h3>
    <ul>
      <li v-for="product in list" :key="product.id">
        {{ product.title }} - {{ product.price | priceReg }}
        <br />
        <button :disabled="!product.inventory" @click="addProToCart(product)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("pro", ["list"])
  },
  methods: {
    ...mapActions("pro", ["getProList"]),
    ...mapActions("spc", ["addProToCart"]),
  },
  created() {
    this.getProList();
  }
};
</script>

<style>
h2,
h3,
ul,
li {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
ul li{
  margin:10px 0;
}
li button {
  margin-top: 5px;
}
</style>
